たかがボタン、されどボタン ~button要素から深ぼるボタンUIの定義について~
アフォーダンス
「できそうな気がする」
境やモノが人や動物に対して「与える(afford)」意味や価値、行動の可能性のこと
シグニファイア
ものをどう使うか、使えるかのヒント
ボタンの有効/無効、アイコンで何ができるかを表す
GUI
スキューモフィズム
リッチデザイン
実態に寄せたようなデザイン
情報量が多い
フラットデザイン
ニューモフィズム、グラスモーフィズム
ボタンとしての視認性はちょっと落ちている
マテリアルデザイン
フラットデザインの影響
ハイパーリンク表現によるボタン
aタグでボタンを作ることがある
ざんねんなボタン実装集
type属性を忘れた<button>
form内に書いたbuttonにtypeつけずにsubmitされた
HTML Living Standardにbuttonの仕様が書いてある
linterでbuttonのtypeを必須化して気づける
<a>で実装されたUIボタン
使い分ける基準:振る舞い
ARIAの定義
ボタン:アクション
スペースキー、エンターキー
リンク:ナビゲーション
エンターキーのみ
<div>で実装されたUIボタン
div:意味を持たない名前のない役割
HTMLの役割は支援技術に伝わる
名前、役割、値がある
role属性で読み上げはされるが、キーボード操作はされない
ガイドラインから学ぶ鉄則
セマンティクスと振る舞いがあるならネイティブ要素を使おう
悪いARIAより、ARIAを使わないほうがマシ